<p>Illustrates custom validation, you have to select time between 12:00 and 13:59</p>

<div class="mb-3">
	<ngb-timepicker [formControl]="ctrl" required></ngb-timepicker>
	@if (ctrl.valid) {
		<div class="small form-text text-success">Great choice</div>
	}
	@if (ctrl.errors) {
		<div class="small form-text text-danger">
			@if (ctrl.errors['required']) {
				<div>Select some time during lunchtime</div>
			}
			@if (ctrl.errors['tooLate']) {
				<div>Oh no, it's way too late</div>
			}
			@if (ctrl.errors['tooEarly']) {
				<div>It's a bit too early</div>
			}
		</div>
	}
</div>

<hr />
<pre>Selected time: {{ ctrl.value | json }}</pre>
